import React, { useState, useEffect } from 'react'
import Header from '../components/Header';
import Bottom from '../components/Bottom'
import './Information.css'
import axios from "axios";
import { Carousel } from 'antd';
import { Link } from 'react-router-dom';

const Information = () => {
    const [imgList, setimgList] = useState([]);
    const [CarimgList, setCarimgList] = useState([]);
    useEffect(() => {
        axios.get("http://192.168.72.166:8080/api/getShowDatas")
            .then(res => {
                const data = res.data.data;
                data.forEach(item => {
                    let show_image = 'http://192.168.72.166:8080/' + item.show_name;
                    item.show_name = show_image
                })
                setCarimgList(data)
            })

        axios.get("http://192.168.72.166:8080/api/getCreationResourcesDatas")
            .then(res => {
                const data = res.data.data;
                data.forEach(item => {
                    let create_image = 'http://192.168.72.166:8080/' + item.create_image;
                    item.create_image = create_image
                })
                setimgList(data)
            })
    }, [])
    return (
        <div >
            <Header />
            <div className='information'>
                <h3>资讯服务</h3>
                {/* 书写一个组件 */}
                <div className='ishow'>
                    <Carousel>
                        {
                            CarimgList.map(item => {
                                if (item.show_token === 'creation_resources')
                                    return (
                                        <div key={item.show_id}>
                                            <img className='contentStyle' src={item.show_name} />
                                        </div>
                                    )
                            })
                        }
                    </Carousel>
                </div>
                <div className='culturalHeritage'>
                    <h4>非物质文化遗产信息</h4>
                    {/* 经过接口数据的map */}
                    <div className='news'>
                        <div className='imgList'>
                            {

                                imgList.map(item => {
                                    if (item.create_content === '非遗文创产品' && item.create_is_recommend === 1)
                                        return (

                                            <div key={item.create_id} className='feiyi-news'>
                                                <Link to={{ pathname: '/information/showcontent', state: { content: item } }}>
                                                    <div className='feiyi-name'>{item.create_name}</div>
                                                    <div className='show-image'><img src={item.create_image} /></div>
                                                </Link>

                                            </div>
                                        )
                                })
                            }
                        </div>
                        <div className='text'>
                            <h4>非物质文化遗产文创化</h4>
                            <p>非遗文创化，是一种非物质文化遗产和文化创意产业结合发展过程中产生的新兴文化态势。
                                广义的“非遗文创化”指：“依靠个人或团队的力量，以非遗作为生产资料，通过技术、创意和产业化的方式进行文化产品的开发营销，把非遗与市场运行机制相结合，形成完整的产业链条，
                                创造出适应人们物质及精神需求的文化产品，同时使非遗本身具备系统性、普及性及经济附加值</p>
                        </div>
                    </div>
                    <div className='showdetail'>
                        <button>查看更多</button>
                    </div>
                </div>
                <div className='museumCreate'>
                    <h4>博物馆文创</h4>
                    <div className='news'>
                        <div className='imgList'>
                            {
                                imgList.map(item => {
                                    if (item.create_content === '博物馆文创产品' && item.create_is_recommend === 1)
                                        return (
                                            <div key={item.create_id} className='feiyi-news'>
                                                <div className='show-image'><a href='#'><img src={item.create_image} /></a></div>
                                            </div>
                                        )
                                })
                            }
                        </div>
                        <div className='text'>
                            <h4>博物馆展品文创化</h4>
                            <p>博物馆作为民族文化和世界文明的集中表现，作为历史文化与民族精神的结晶；
                                它的存在有利于开展爱国主义教育，培养主动探索的精神品格，并拓展视野，
                                继承优秀的精神品质，培养创新精神，而博物馆的文创产品的开发，更是把博物馆的功能和意义放大并得到延伸。</p>
                        </div>
                    </div>
                    <div className='showdetail'>
                        <button id='showdetail'>查看更多</button>
                    </div>
                </div>
                <div className='school'>
                    <h4>院校文创</h4>
                    <div className='news'>
                        <div className='imgList'>
                            {
                                imgList.map(item => {
                                    if (item.create_content === '院校文创产品' && item.create_is_recommend === 1)
                                        return (
                                            <div key={item.create_id} className='feiyi-news'>
                                                <div className='show-image'><a href='#'><img src={item.create_image} /></a></div>
                                            </div>
                                        )
                                })
                            }
                        </div>
                        <div className='text'>
                            <h4>高校文创的目的和意义</h4>
                            <p>高校文创是一种承载高校文化的载体，同时也是一个促进高校文化传播的宣传抓手。
                                一个形象突出、意趣生动的高校文创产品，
                                具有很强的代表意义，它生动的展现了一所高校特有的历史传承、价值追求和治学理念。</p>
                        </div>
                    </div>
                    <div className='showdetail'>
                        <button id='showdetail'>查看更多</button>
                    </div>
                </div>
                <Bottom />
            </div>
        </div>
    )
}
export default Information;

